<template>
	<div class="container">
	<div class="tab">
		<router-link to="/GroupScheduleView"><el-button type="primary" class="tk">团课课程</el-button></router-link>
	    <router-link to="/LeagueClassView"><el-button class="tk">团课课表</el-button></router-link>
	</div>
	<div>
	<div>
		 <el-form :inline="true" class="demo-form-inline">
		    <el-form-item>
		      <el-input v-model="form.name"  placeholder="课程名称" />
		    </el-form-item>
		    <!-- <el-form-item>
		      <el-select placeholder="请选择课程教练" v-model="jiaolian">
		        <el-option v-for="(option,index) in tableData" :key="index" :label="option.jiaolian" :value="option.id"></el-option>
		      
		      </el-select>
		    </el-form-item> -->
		    <el-form-item>
		      <el-button type="primary" @click="Enquiry" class="inquire" :icon="Search">查询</el-button>
			  
			  <router-link to="/NewGroupCoursesView?compile=1"> <el-button class="inquire" type="primary">添加团课</el-button>
				</router-link>
		    </el-form-item>
		  </el-form>
	</div>
	
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="课程图片" width="200">
		<template #default="s">
        <el-image :src="s.row.pic" style="width: 150px; height: 100px" />
       </template>
	</el-table-column>

    <el-table-column prop="name" label="课程名称" width="200" />
    <el-table-column prop="coachName" label="教练" width="250" />
	<el-table-column prop="sort" label="排序" width="200" />
	<el-table-column prop="time" label="时长" width="250" />
	<el-table-column prop="classOrderNumber" label="可预约人数" width="220" />
	<el-table-column label="操作" width="300">
	      <template #default="s">
			  <router-link :to="'/NewGroupCoursesView?compile=0&id='+s.row.id"> <el-button class="operation" type="primary" :icon="Edit">编辑</el-button>
			</router-link>
			  <router-link to="/MembershipCardView"><el-button class="operation" type="primary">会员卡</el-button></router-link>
			  <el-button @click="GroupListDel($event)" :data-id="s.row.id" type="danger" :icon="Delete">删除 </el-button>
	      </template>
	    </el-table-column>
  </el-table>
  
  </div>
  <div class="fenye">
              <el-pagination class="fenye" background layout="prev, pager, next" :total="100" :page-size="5">
              </el-pagination>
          </div>
  </div>
</template>

<script lang="ts" setup>
import { Edit,Delete ,Search} from '@element-plus/icons-vue';//icon图标
import {ref,reactive} from "vue"
import { GroupHooks,Groups } from '../hooks/GroupHooks';
const tableData=ref<Array<any>>([])
const _GroupHooks: Groups = GroupHooks()
_GroupHooks.GroupListData(tableList)

function tableList(data:any){ //列表数据
	tableData.value=data
	console.log(tableData.value)
}
const GroupListDel = (e:any) => {//删除
  let id = e.currentTarget.dataset.id;
  console.log("id:", id);
  _GroupHooks.getGroupListDel(id,tableList);
};
const form=reactive({
	limit:40,
	name:"",
	page:1,
})
//查询
function Enquiry(){
	_GroupHooks.getCourseEnquiry(form.limit,form.name,form.page,tableList)
}
 
</script>
<style type="text/css" scoped>
	
	.tab{
		margin-bottom: 20px;
	}
	>>>th div{
		text-align: center;
	}
	>>>td div{
		text-align: center;
	}
	.fenye{
       margin-top: 10px;
        display: flex;
        justify-content: flex-end;
	}
	.tk{
		   width: 150px;
		   height: 40px;
		   margin: 20px 10px 20px 0;

	}
	.inquire{
		width: 100px;
		height: 35px;
		margin-left: 10px;
	}
	.operation{
		margin-right:5px ;
	}
</style>